import React,{ useEffect, useState } from 'react';

import "../../../styles/HuYueYue/jixiao.scss"

import { Layout,Menu,MenuProps  } from 'antd';

import { useNavigate,Outlet } from 'react-router-dom';

import { UserOutlined,FileTextOutlined ,FieldTimeOutlined,BookOutlined} from '@ant-design/icons';

const {Sider, Content } = Layout;

interface props{

}



function JiXiao(props:props) {

          // 用来跳转路由
          var navigator=useNavigate()

          var [selectedKey,setSelectedKey]=useState('')
    
          type MenuItem = Required<MenuProps>['items'][number];
    
          function getItem(
              label: React.ReactNode,
              key?: React.Key | null,
              icon?: React.ReactNode,
              children?: MenuItem[],
              type?: 'group',
            ): MenuItem {
              return {
                key,
                icon,
                children,
                label,
                type,
              } as MenuItem;
            }
    
     //配置左侧导航菜单
     const items: MenuItem[] = [
        getItem('考核计划', '/index/jixiao/jihua', <BookOutlined />, ),
        getItem('考核进度', '/index/jixiao/jindu', <FieldTimeOutlined />, ),
        getItem('员工绩效档案', '/index/jixiao/dangan', <FileTextOutlined />, ),
      
        getItem('设置', '', <UserOutlined />, [
          getItem('指标库','/index/jixiao/zhibiao'),
          getItem('考核模板','/index/jixiao/muban'),
          getItem('绩效设置','/index/jixiao/jixiaoshezhi')
        ])
      ];
    
    var handleClick=(e:any)=>{
        // 条转路由
        navigator(e.key)
        // 保存key值
        setSelectedKey(e.key)
    
        // 保存到本地储存中
        sessionStorage.setItem('key2',e.key)
    
    }
    
    useEffect(()=>{
      setSelectedKey(sessionStorage.getItem("key2")||'/index/jihua')
    },[])

    return (
        <div className='jixiao-box'>
            <Layout>
              <Sider className='jixiao-left'>
                  <Menu
                      mode="inline"
                      onClick={handleClick}
                      items={items}
                      selectedKeys={[selectedKey]}
                  />
              </Sider>
              <Content className='jixiao-right'>
                  {/* 设置一个路由出口，三级路由跳转 */}
                  <Outlet></Outlet>
              </Content>
          </Layout>
        </div>
    );
}

export default JiXiao;